<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">甲醇船型基本信息</div>
      <div class="loadAndSearch" style="justify-content: flex-end">
        <div class="search" style="width: 300px !important">
          <input
            type="text"
            placeholder="船名"
            v-model="searchText"
            style="width: 236px !important"
          />
          <div class="searchButton" @click="getRenderList()">搜索</div>
        </div>
      </div>

      <div
        class="table"
        style="margin-top: 10px"
        :style="{ width: tableWidth }"
      >
        <el-table
          empty-text="暂无数据"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#777676 !important',
            fontWeight: '800',
          }"
          :data="tableData"
          border
          stripe
          style="width: 100%; height: auto"
          :row-style="{ height: 30 + 'px' }"
          :cell-style="{ padding: 0 + 'px' }"
          max-height="65vh"
          @row-dblclick="handleRowDblclick"
        >
          <el-table-column
            type="index"
            :index="indexNumber"
            align="center"
            label="序号"
            min-width="55"
          >
          </el-table-column>
          <!-- "船公司" -->
          <el-table-column
            prop="shipCompany"
            label="船公司"
            align="center"
            min-width="90"
          />
          <!-- 运营公司 -->

          <el-table-column
            prop="shipTypeNum"
            label="船型"
            min-width="90"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="chineseName"
            label="中文船名"
            min-width="90"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="englishName"
            label="英文船名"
            min-width="90"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="imo" label="IMO" min-width="90" align="center">
          </el-table-column>
          <el-table-column
            prop=""
            label="已加注艘次"
            min-width="90"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            min-width="90"
            align="center"
          >
          </el-table-column>
        </el-table>
        <!-- 内容过多，会出现滚动条 -->
      </div>
      <div class="foot">
        <div class="currentPage">当前第{{ page }}/{{ totalPages }}页</div>
        <div
          class="lastPage"
          :style="{ background: color }"
          @click="clickLastPage()"
        >
          上一页
        </div>
        <div
          class="nextPage"
          :style="{ backgroundColor: color1 }"
          @click="clickNextPage()"
        >
          下一页
        </div>
        <div class="currentNumber">共{{ totalNumber }}条</div>
        <div>跳转至:</div>
        <input
          type="text"
          class="skipPage"
          style="width: 50px !important"
          v-model="shipPageNumer"
        />
        <div class="sureSkip" @click="skipPage">确定</div>
      </div>
    </div>
    <div class="dialog" ref="dialog" :style="{ display: show }">
      <div class="loadHomeWorkIneer">
        <div class="topTabButton">
          <div
            class="tabOne"
            :class="{ tabOneActive: isActive === 1 }"
            @click="changeChoose($event, 1)"
          >
            船舶信息
          </div>
          <div
            class="tabOne"
            :class="{ tabOneActive: isActive === 2 }"
            @click="changeChoose($event, 2)"
            style="margin-left: 10px"
          >
            系泊研究
          </div>
          <div
            class="tabOne"
            :class="{ tabOneActive: isActive === 3 }"
            @click="changeChoose($event, 3)"
            style="margin-left: 10px"
          >
            同步作业风险评估
          </div>
        </div>
        <div class="changeTop">
          <div class="back" @click="close()">返回</div>
        </div>

        <!-- <div class="topTabButton">
          <div class="tabOne" @click="">船舶信息</div>
          <div class="tabOne">系泊研究</div>
          <div class="tabOne">同步作业风险评估</div>
        </div> -->
        <div class="manyInput" v-show="isActive === 1">
          <div class="dialogText">1.船舶基本信息</div>
          <div class="iuptInnerContain">
            <div class="inputInner">
              <div class="name">船型编号:</div>
              <input
                type="text"
                placeholder="船型编号"
                v-model="shipTypeNum"
                :disabled="true"
              />
            </div>

            <div class="inputInner">
              <div class="name">船舶类型:</div>
              <input
                type="text"
                placeholder="船舶类型"
                v-model="shipType"
                disabled
              />
            </div>

            <div class="inputInner">
              <div class="name">船长:</div>
              <input
                type="number"
                name=""
                placeholder="船长"
                v-model="shipLength"
                disabled
              />
            </div>
            <div class="inputInner">
              <div class="name">液货舱型:</div>
              <input
                type="text"
                name=""
                placeholder="液货舱型"
                v-model="cargoTankType"
                disabled
              />
            </div>
            <div class="inputInner">
              <div class="name">液货舱舱容:</div>
              <input
                type="number"
                name=""
                placeholder="液货舱舱容"
                v-model="cargoTankCapacity"
                disabled
              />
            </div>
            <div class="inputInner">
              <div class="name">靠泊方式:</div>
              <input
                name=""
                placeholder="靠泊方式"
                v-model="berthingMethod"
                disabled
              />
            </div>
            <div class="inputInner">
              <div class="name">最大加注速率:</div>
              <input
                type="number"
                name=""
                placeholder="最大加注速率"
                v-model="maxFillingRate"
                disabled
              />
            </div>
            <div class="inputInner">
              <div class="name">加注站位置:</div>
              <input
                placeholder="加注站位置"
                v-model="fillingPosition"
                disabled
              />
            </div>
            <div class="inputInner">
              <div class="name">碰垫吊高:</div>
              <input
                name=""
                placeholder="碰垫吊高"
                v-model="bumpHeight"
                disabled
              />
            </div>

            <div class="inputInner">
              <div class="name">软管连接形式:</div>
              <input
                type="text"
                name=""
                placeholder="软管连接形式"
                v-model="shose_connection_form"
                disabled
              />
            </div>

            <div class="inputInner">
              <div class="name">加注站布置:</div>
              <input
                type="text"
                name=""
                placeholder="加注站布置"
                v-model="fillingStation"
                disabled
              />
            </div>

            <div class="inputInner">
              <div class="name">氮气软管接头类型:</div>
              <input
                type="text"
                name=""
                placeholder="氮气管接头类型"
                v-model="nitrogenPipeType"
                disabled
              />
            </div>
          </div>
        </div>
        <div class="manyInput" v-show="isActive === 2">
          <div class="dialogText" style="margin-top: 10px">2.系泊研究</div>

          <div class="centerInput1">
            <div class="centerNamePut">
              <div class="centerPicContain" style="height: 400px">
                <div style="width: 100%; height: 100%; margin-top: 10px">
                  <img
                    class="img1"
                    :src="imageSrc(MoorImg)"
                    alt=""
                    width="100%"
                    height="100%"
                  />
                </div>
              </div>
              <div class="dialogText1" style="margin-top: 15px">
                系泊方向及带缆要求
              </div>
              <div class="centerPicContain">
                <div class="aliLIne">
                  <div class="tableLeft1">
                    <div class="left1Child1">靠泊方向</div>
                    <div class="left1Child2">加注船左靠大船</div>
                    <div class="left1Child3">加注船右靠大船</div>
                  </div>
                  <div class="tableLeft2">
                    <div class="left1Child1">船首系缆</div>
                    <div class="left1Child2">
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.C2" disabled />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.C3" disabled />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.C4" disabled />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.C5" disabled />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.C6" disabled />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.C7" disabled />
                        </div>
                      </div>
                    </div>
                    <div class="left1Child3"></div>
                  </div>
                  <div class="tableLeft2">
                    <div class="left1Child1">船尾系缆</div>
                    <div class="left1Child2">
                      <div class="splice">
                        <div class="spliceLeft">Stern Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.E2" disabled />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.E3" disabled />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.E4" disabled />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Stern Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.E5" disabled />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.E6" disabled />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="ExcelJson.E7" disabled />
                        </div>
                      </div>
                    </div>
                    <div class="left1Child3"></div>
                  </div>
                  <div class="tableLeft4">
                    <div class="left1Child1">系泊报告</div>
                    <div class="left1Child2">
                      <input type="text" v-model="ExcelJson.F2" disabled />
                    </div>
                    <div class="left1Child2">
                      <input type="text" v-model="ExcelJson.F5" disabled />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="manyInput" v-show="isActive === 3">
          <div class="dialogText" style="margin-top: 10px">
            3.同步作业风险评估
          </div>
          <div
            class="centerInput1"
            style="padding-bottom: 20px"
            v-show="isActive"
          >
            <div class="centerNamePut">
              <div
                class="centerPicContain"
                style="height: 400px; margin-top: 20px"
              >
                <div style="width: 100%; height: 100%">
                  <img
                    class="img1"
                    :src="imageSrc(RestrictedAreaImg)"
                    alt=""
                    width="100%"
                    height="100%"
                  />
                </div>
              </div>

              <div class="dialogText1" style="width: 100%">黄色限制区域</div>
              <el-input
                v-model="YellowRestrictedArea"
                style="width: 90%; margin: auto"
                :rows="6"
                type="textarea"
                disabled
              />
              <div class="dialogText1">红色限制区域</div>
              <el-input
                v-model="RedRestrictedArea"
                style="width: 90%; margin: auto"
                :rows="6"
                type="textarea"
                disabled
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";

import zhCn from "element-plus/es/locale/lang/zh-cn";
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      shipTypeNum: "",
      shipType: "",
      shipLength: "",
      cargoTankType: "",
      cargoTankCapacity: "",
      berthingMethod: "",
      maxFillingRate: "",
      fillingPosition: "",
      bumpHeight: "",
      shose_connection_form: "",
      fillingStation: "",
      nitrogenPipeType: "",
      MoorImg: "",
      RestrictedAreaImg: "",
      chooseShipName: "海港未来",
      YellowRestrictedArea: "",
      RedRestrictedArea: "",

      isActive: 1,
      serchNum: null,
      shipPageNumer: 1,
      multi: [],
      locale: zhCn,
      totalNumber: 0,
      tableData: [],
      searchText: "",
      tableWidth: null,
      page: 1,
      size: 20,
      show: "none",
      currentNum: 0,
      serialNumber: "",
      shipWidth: "",

      color: "#EBEBEB",
      color1: "#EBEBEB",
      ExcelJson: {
        C2: "",
        C3: "",
        C4: "",
        C5: "",
        C6: "",
        C7: "",
        E2: "",
        E3: "",
        E4: "",
        E5: "",
        E6: "",
        E7: "",
        F2: "",
        F5: "",
      },

      id: null,
      totalPages: null,
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},

  methods: {
    clickEdit(a) {
      this.tableData.forEach((item) => {
        if (item.id == a) {
          this.shipTypeNum = item.shipType.shipTypeNum;
          this.shipType = item.shipType.shipType;
          this.shipLength = item.shipType.shipLength;
          this.cargoTankType = item.shipType.cargoTankType;
          this.cargoTankCapacity = item.shipType.cargoTankCapacity;
          this.berthingMethod = item.shipType.berthingMethod;
          this.maxFillingRate = item.shipType.maxFillingRate;
          this.fillingPosition = item.shipType.fillingPosition;

          this.bumpHeight = item.shipType.bumpHeight;
          this.shose_connection_form = item.shipType.shose_connection_form;
          this.fillingStation = item.shipType.fillingStation;
          this.nitrogenPipeType = item.shipType.nitrogenPipeType;

          this.MoorImg = item.shipType.zhiYuanMoorImg;
          this.ExcelJson = JSON.parse(item.shipType.zhiYuanExcelJson);
          this.RestrictedAreaImg = item.shipType.zhiYuanRestrictedAreaImg;

          this.YellowRestrictedArea = item.shipType.zhiYuanYellowRestrictedArea;
          this.RedRestrictedArea = item.shipType.zhiYuanRedRestrictedArea;
        }

        this.show = "block";
      });
    },
    imageSrc(img) {
      if (img) {
        return (
          this.$base + "/download/shipType/" + img + "?" + new Date().getTime()
        );
      } else {
        return "";
      }
    },

    changeChoose(event, num) {
      this.isActive = num;
    },

    // 跳转页面
    skipPage() {
      if (this.shipPageNumer <= this.totalPages && this.shipPageNumer > 0) {
        this.page = this.shipPageNumer;
        this.getRenderList();
      } else {
        this.$message({
          type: "warning",
          message: "超出页面数量范围",
        });
      }
    },

    indexNumber(index) {
      return (this.page - 1) * this.size + index + 1;
    },
    handleRowDblclick(row) {
      this.clickEdit(row.id);
    },

    // 导入文件结束=============

    close() {
      this.show = "none";
      this.isActive = 1;
      this.getRenderList();
    },

    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },

    // 获取列表数据
    async getRenderList() {
      let data = {};
      if (this.searchText) {
        data = {
          page: this.page,
          size: this.size,
          type: 1,
          englishName: this.searchText,
        };
      } else {
        data = {
          page: this.page,
          size: this.size,
          type: 1,
        };
      }
      await service({
        methods: "get",
        url: "/ship-type/list/find-one-page",
        params: data,
      })
        .then((e) => {
          this.totalPages = e.data.totalPages;
          this.totalNumber = e.data.totalElements;
          if (this.totalPages == 0) {
            this.totalPages = 1;
          }
          if (this.page < this.totalPages) {
            this.color1 = "#268FDE";
          } else {
            this.color1 = "#EBEBEB";
          }
          if (this.page == 1) {
            this.color = "#EBEBEB";
          } else {
            this.color = "#268FDE";
          }
          this.tableData = e.data.content;

          this.currentNum = e.data.numberOfElements;
        })
        .catch((err) => {});
    },

    clickLastPage() {
      if (this.page > 1) {
        this.page--;
        if (this.page == 1) {
          this.color = "#EBEBEB";
        } else {
          this.color = "#268FDE";
        }
        if (this.page < this.totalPages) {
          this.color1 = "#268FDE";
        }
        this.getRenderList();
      } else {
        this.color = "#EBEBEB";
      }
    },
    clickNextPage() {
      if (this.page < this.totalPages) {
        this.page++;
        this.color = "#268FDE";
        if (this.page == this.totalPages) {
          this.color1 = "#EBEBEB";
        } else {
          this.color1 = "#268FDE";
        }
      }
      this.getRenderList();
    },
    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作
      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
    $route(to, from) {
      // 在这里根据参数的变化执行刷新页面的逻辑
      if (to.name == from.name) {
        this.close();
      }
    },
  },

  created() {
    this.sendMessage();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    let that = this;
    this.getRenderList();

    // this.sendMessage();
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.loadHomeWorkIneer::-webkit-scrollbar {
  width: 5px; /* 自定义滚动条的宽度 */
  height: 5px; /* 如果需要自定义垂直滚动条的高度 */
}

/* 自定义滚动条滑块的颜色 */
.loadHomeWorkIneer::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
  border-radius: 10px; /* 可选：为滚动条滑块添加圆角 */
}

/* 自定义滚动条轨道的颜色 */
.loadHomeWorkIneer::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px; /* 可选：为滚动条轨道添加圆角 */
}
.manyInput::-webkit-scrollbar {
  width: 5px; /* 自定义滚动条的宽度 */
  height: 5px; /* 如果需要自定义垂直滚动条的高度 */
}

/* 自定义滚动条滑块的颜色 */
.manyInput::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
  border-radius: 10px; /* 可选：为滚动条滑块添加圆角 */
}

.manyInput::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px; /* 可选：为滚动条轨道添加圆角 */
}
.manyInput {
  width: 1170px;
  height: 80vh;
  margin: auto;
  overflow: auto;

  .iuptInnerContain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    .inputInner {
      width: 375px;
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      color: #365488;
      .name {
        width: 160px;
        height: 100%;
        line-height: 4vh;
        text-align: right;
        font-size: 15px;
      }

      .inputContainer {
        width: 200px;
        margin-left: 5px;
      }
      .el-input__inner {
        background: white !important;
      }
      input {
        width: 210px;
        height: 34px;
        margin-left: 5px;
        border-radius: 5px;
        text-indent: 1em;
        outline: none;
        border: none;
        background: white !important;
        color: #365488;
        border: 1px solid #dcdfe6;
      }
      input::-webkit-input-placeholder {
        color: #a8abb2;
      }
      input[type="date"] {
        color: #365488;
        text-align: left;
        border-radius: 4px;
        box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
      }
    }

    .el-date-picker .el-picker-panel {
      background-color: white !important; /* 你想要的背景颜色 */
    }
  }
  .line {
    width: 100%;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 2px solid #c0c0c0;
  }
  .centerInput {
    width: 100%;
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #c0c0c0;

    .centerNamePut {
      width: 555px;

      .inputInner {
        width: 375px;
        height: 35px;
        // background: blue;
        margin-right: 10px;
        margin-top: 10px;
        display: flex;
        // align-items: center;
        // justify-content: space-between;
        color: #365488;
        .name {
          width: 150px;
          height: 100%;
          line-height: 4vh;
          text-align: right;
          font-size: 15px;
        }

        .inputContainer {
          width: 210px;
          margin-left: 5px;
        }
        .el-input__inner {
          background: white !important;
        }
        input {
          width: 220px;
          height: 34px;
          margin-left: 5px;
          border-radius: 5px;
          text-indent: 1em;
          outline: none;
          border: none;
          background: white !important;
          color: #365488;
          border: 1px solid #dcdfe6;
        }
        input::-webkit-input-placeholder {
          color: #a8abb2;
        }
        input[type="date"] {
          color: #365488;
          text-align: left;
          border-radius: 4px;
          box-sizing: border-box;
        }
      }
      .el-date-picker .el-picker-panel {
        background-color: white !important;
      }
    }
    .centerLine {
      height: 100%;
      width: 2px;
      height: 350px;
      border-left: 2px solid #c0c0c0;
    }
  }
  .centerInput1 {
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    // align-items: center;
    // border-bottom: 2px solid #c0c0c0;
    padding-bottom: 10px;

    .centerNamePut {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .inputInner {
        width: 400px;
        height: 35px;
        // background: blue;
        margin-right: 10px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        color: #365488;
        .name {
          width: 125px;
          height: 100%;
          line-height: 4vh;
          text-align: right;
          font-size: 15px;
        }
        .name1 {
          width: 110px;
          height: 100%;
          background: #0470c1;
          text-align: center;
          line-height: 4vh;
          border-radius: 5px;
          font-size: 15px;
          color: white;
        }
        .name2 {
          width: 130px;
          margin-right: 10px;
          height: 100%;
          background: #0470c1;
          text-align: center;
          line-height: 4vh;
          border-radius: 5px;
          font-size: 15px;
          color: white;
        }

        .inputContainer {
          width: 220px;
          margin-left: 5px;
        }
        .el-input__inner {
          background: white !important;
        }
        input {
          width: 240px;
          height: 34px;
          margin-left: 5px;
          border-radius: 5px;
          text-indent: 1em;
          outline: none;
          border: none;
          background: white !important;
          color: #365488;
          border: 1px solid #dcdfe6;
        }
      }
      .el-date-picker .el-picker-panel {
        background-color: white !important; /* 你想要的背景颜色 */
      }
    }
    .centerLine {
      height: 100%;
      width: 2px;
      height: 520px;
      border-left: 2px solid grey;
    }
    .centerLine1 {
      height: 100%;
      width: 2px;
      height: 670px;
      border-left: 2px solid grey;
    }
  }
}

.dialogText {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 25px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}
.dialogText1 {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 20px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}

.dialog,
.dialog1 {
  width: 100%;
  height: 100%;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}

.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;
    overflow-y: hidden;
    overflow: auto;

    .loadAndSearch {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;
  height: 65vh;
  // background: red;
}
.centerPicContain {
  width: 90%;
  margin: auto;
  height: 150px;
  // background: blue;
  margin-top: 5px;
}
div {
  box-sizing: border-box;
}
.aliLIne {
  width: 100%;
  display: flex;
  height: 140px;
  border: 1px solid #c0c0c0;
  color: #3e3d3d;
  text-align: center;
  overflow: hidden;
  font-size: 14px;
  .tableLeft1 {
    width: 17%;
    height: 140px;
    .left1Child1 {
      width: 100%;
      height: 20px;
      border-right: 1px solid #c0c0c0;
    }

    .left1Child2,
    .left1Child3 {
      width: 100%;
      height: 60px;
      border-top: 1px solid #c0c0c0;
      border-right: 1px solid #c0c0c0;
      // display: flex;
      align-content: center;
      justify-content: center;
    }
  }
  .tableLeft2 {
    width: 33%;
    .left1Child1 {
      width: 100%;
      height: 20px;
      border-right: 1px solid #c0c0c0;
    }
    .left1Child2 {
      width: 100%;
      height: 60px;
      border-top: 1px solid #c0c0c0;
      .splice {
        width: 100%;
        display: flex;
        div {
          height: 20px;
          border-right: 1px solid #c0c0c0;
          border-bottom: 1px solid #c0c0c0;
        }
        .spliceRigth {
          width: 40%;
          input {
            outline: none;
            border: none;
            width: 100% !important;
            text-align: center;
          }
        }
        .spliceLeft {
          width: 60%;
        }
      }
    }
  }
  .tableLeft3 {
    width: 33%;
  }
  .tableLeft4 {
    width: 17%;
    .left1Child1 {
      height: 20px;
    }
    .left1Child2 {
      width: 100%;
      height: 60px;
      border-top: 1px solid #c0c0c0;
      input {
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        text-align: center;
      }
    }
  }
}
.dialog3 {
  width: 410px;
  height: 270px;
  border-radius: 10px;
  background: #f0f1f4;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;
  z-index: 100;
}

.dialog3 .upContain {
  width: 152px;
  height: 28px;
  margin: auto;
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog3 .upContain .addfile {
  width: 100%;
  height: 28px;
  font-size: 15px;
}

.dialog3 .fileName {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog3 .fileName div {
  width: 100%;

  text-align: center;
  color: black;
}

.dialog3 .upContain .addfile::file-selector-button {
  width: 100%;
  height: 28px;
  background-color: #268fde;
  border: 1px solid #268fde;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
}

.dialog3 .upFileSrue {
  width: 152px;
  height: 20px;
  font-size: 15px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog3 .upFileSrue .buttonUpdata {
  outline: none;
  border: none;
  width: 65px;
  border-radius: 0.5vh;
  height: 20px;
  background: #ed1c24;
  color: white;
}

.dialog3 .upFileSrue .buttonUpdata1 {
  background: #22b14c;
}
.shipTypeListName {
  width: 90%;
  height: 40px;
  background: #fafafa;
  margin: auto;
  border: 1px solid #ebeef5;
  border-bottom: none;
  margin-top: 10px;
  input {
    outline: none;
    border: none;
    background: #fafafa;
    width: 100%;
    height: 100%;
    text-align: center;
  }
}
.cell {
  height: 100% !important;
}
</style>
